<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page-size {
            list-style: none;
            display: flex;
        }

        .page-size li {
            width: 40px;
            height: 40px;
            text-align: center;
            background: #ededed;
            margin-right: 10px;
            line-height: 40px;
            color: blue;
        }

        .page-size li.active {
            background: lightblue;
        }
    </style>
</head>

<body>
    <ul id="page" class="page-size">

    </ul>
    <ul id="page2" class="page-size">

    </ul>
    <script>
        // POP编程：面向过程式编程，直接通过对业务理解完成功能的实现
        // OOP编程：面向对象编程，将业务功能以构造函数的方式进行封装，使用的是通过构建对象的方式进行调用
        let result = {
            pageNums: 10,
            currentPage: 2
        };

        class PageView {
            _root = null;
            _pageNums = 0;
            _currentPage = 0;
            _changePage = function () { };
            constructor(options = {}) {//PageView被new时候构建对应的实例对象
                this._root = document.querySelector(options.el);
                this._pageNums = options.data.pageNums;
                this._currentPage = options.data.currentPage;
                this._changePage = options.changePage;
                this.initPageElement();
            }

            // PageView的原型方法，通过构建的实例对象调用
            initPageElement() {
                for (let i = 1; i < this._pageNums; i++) {
                    let tempLi = document.createElement("li");
                    tempLi.innerText = i;
                    if (i == this._currentPage) {//有一个默认被选中的页码
                        tempLi.classList.add("active");
                    }

                    tempLi.addEventListener("click", () => {
                        let activeLi = this._root.querySelector("li.active");
                        activeLi.classList.remove("active");//如果有被选中的，立马删除
                        tempLi.classList.add("active");//给当前点击的li添加active
                        this._currentPage = i;//保存当前被点击的选中页码
                        this._changePage(i);//调用开发自定义的触发方法，并传递当前页码
                    });
                    this._root.appendChild(tempLi);
                }
            }


        }
        let pageObj = new PageView({
            el: "#page",
            data: result,
            changePage: function (pageNum) {
                console.log("查询页码", pageNum);
            }
        });

        new PageView({
            el:"#page2",
            data:{
                pageNums: 30,
                currentPage: 10
            },
            changePage: function (pageNum) {
                console.log("查询页码", pageNum);
            }
        });
        console.log(pageObj);

    </script>
</body>

</html>